<template>
  <view class="bd t1">
    <!-- <view class="title">{{detail.title}}</view> -->
    <!-- <image :src="detail.imgUrl" mode="aspectFit" style="width: 100%;"></image> -->
    <u-navbar :title="title" title-width="300rpx" class="nav" :is-back="false">
      <view class="wddj wddj1 t1" @click="back">
        <u-icon name="arrow-left" size="46"></u-icon>
      </view>
      <!-- <view class='rl' @click="share">
				<u-icon name="zhuanfa" size="46"></u-icon>
			</view> -->
    </u-navbar>
    <view class="dbox">
      <view class="art" v-html="detail.content"> </view>
      <!-- 			<p class="readcount">
				<span>阅读数：{{readNum}}</span>
				<span>分享数：{{readShareNum}}</span>
			</p> -->
    </view>
    <!-- 		<u-popup v-model="show" mode="bottom">
			<ul class="icons">
				<li @click="sharewx">
					<u-icon size="90" color="#00D86D" name="weixin-circle-fill"></u-icon>
					<span>微信</span>
				</li>
				<li @click="sharewQzone">
					<u-icon size='90' color="#37E8B8" name="moments-circel-fill"></u-icon>
					<span>朋友圈</span>
				</li>
				<li v-show="!iconshow">
					<u-icon size='90' color="#F8CB4F" name="star" @click="shares"></u-icon>
					<span>收藏</span>
				</li>
				<li v-show="iconshow" style="position: relative;">
					<u-icon size='90' color="#F8CB4F" name="star-fill" @click="unenshrine"></u-icon>
					<span>已收藏</span>
					<u-badge type="error" :count="usersave" class="counts" style="position: absolute;top: -2px;
    left: 42px;width: 16px;"></u-badge>
				</li>
			</ul>
		</u-popup> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      detail: {},
      title: "",
      show: false,
      iconshow: false,
      usersave: "",
      img: "../../../static/img/zxun.png", //分享的image图片
      readNum: 0, //阅读数
      readShareNum: 0, //分享数
    };
  },
  onLoad(options) {
    console.log(options);
    this.id = options.id;
    if (options.title.length >= 15) {
      this.title = options.title.substring(0, 15) + "...";
    } else {
      this.title = options.title;
    }

    this.getPlanDetail();
    this.enshrine();
    this.enshrinecount();
    // localStorage.setItem("wzname", 1);
    uni.setStorageSync("wzname", 1);
    // this.addreadNum() //增加阅读数
    // this.readNumber() //读取阅读数
    // this.readshareNum()
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    addreadNum() {
      this.config
        .post("/messageEnshrine/setReadNum", {
          messageId: this.id,
          type: 1,
        })
        .then((res) => {});
    },
    readNumber() {
      this.config
        .post("/messageEnshrine/getReadNum", {
          messageId: this.id,
          type: 1,
        })
        .then((res) => {
          this.readNum = res.data.data;
        });
    },
    addshareNum() {
      //增加分享数
      this.config
        .post("/messageEnshrine/setShareNum", {
          messageId: this.id,
          type: 1,
        })
        .then((res) => {});
    },
    readshareNum() {
      //分享数
      this.config
        .post("/messageEnshrine/getShareNum", {
          messageId: this.id,
          type: 1,
        })
        .then((res) => {
          this.readShareNum = res.data.data;
        });
    },
    enshrine() {
      //收藏
      this.config
        .get("/messageEnshrine/getEnshrine", {
          messageId: this.id,
          type: 1,
        })
        .then((res) => {
          if (res.data.data == 1) {
            this.iconshow = true;
          } else {
            this.iconshow = false;
          }
        });
    },
    //获取收藏数
    enshrinecount() {
      this.config
        .get("/messageEnshrine/getMessageEnshrineNum", {
          messageId: this.id,
          type: 1,
        })
        .then((res) => {
          this.usersave = res.data.data;
        });
    },
    //取消收藏
    unenshrine() {
      this.config
        .post("/messageEnshrine/qxEnshrineMessage", {
          messageId: this.id,
          type: 1,
        })
        .then((res) => {
          uni.showToast({
            title: "取消成功",
          });
          this.show = false;
          this.enshrine();
        });
    },
    getPlanDetail() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/message/getMessageInfo", {
          id: this.id,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.detail = res.data.data;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    back() {
      uni.navigateBack();
    },
    sharewx() {
      //分享给微信好友
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "https://linehealth.cn/share1?id=" + this.id + "&type=" + 1,
        title: this.title,
        summary: this.title,
        imageUrl: this.img,
      });
      this.addshareNum();
    },
    sharewQzone() {
      //分享给微信朋友圈
      uni.share({
        provider: "weixin",
        scene: "WXSenceTimeline",
        type: 0,
        href: "https://linehealth.cn/share1?id=" + this.id + "&type=" + 1,
        title: this.title,
        summary: this.title,
        imageUrl: this.img,
      });
      this.addshareNum();
    },
    share() {
      this.show = true;
    },
    shares() {
      this.config
        .post("/messageEnshrine/enshrineMessage", {
          messageId: this.id,
          type: 1,
        })
        .then((res) => {
          this.usersave = res.data.data;
          this.enshrine();
        });
      uni.showToast({
        title: "收藏成功",
      });
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.dbox {
  position: relative;
}
.readcount {
  width: 94%;
  position: absolute;
  bottom: -32px;
  margin-bottom: 7px;
  left: 10px;
  font-size: 12px;
  color: #a9a9a9;
  border-bottom: 1px solid #d6d6d6;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.title {
  color: #343434;
  font-size: 36upx;
  font-weight: 900;
  text-align: center;
  margin: 30upx 0 60upx;
}

.art {
  padding: 0 30upx;
  line-height: 50upx;
}

.rl {
  position: absolute;
  right: 10px;
}

ul.icons {
  list-style: none;
  height: 120rpx;

  li {
    width: 60px;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
    color: #535353;
    margin: 20rpx 50rpx 20rpx 0;
  }
}
.counts {
  float: left;
  margin-right: 520rpx;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
    height: calc(100vh - var(--window-top));
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
  >>> span {
    color: #ccc !important;
  }
  >>> section {
    color: #ccc !important;
    background-color: #1b1c1e !important;
  }
  .readcount {
    background-color: #1b1c1e !important;
  }
}
</style>